<template>
  <el-row>
    <el-col :span="24">
      <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index">
            <span v-if="index==breadcrumbList.length-1" class="no-redirect">{{ item.name }}</span>
            <a v-else @click.prevent="handlerLink(item)">{{ item.name }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <folder-filter
          :query-list="queryList"
          @handleFilter="getDataList"
  />
  <table-data
          :tableData="tableData"
          :isloading="isloading"
  >
    <template #main>
      <el-table-column label="文件名称">
        <template #default="{row, $index}">
          <a @click.prevent="handlerLink(row)" v-if="row.filetype == 0 || row.ftype == 0" href="">
            <el-icon>
              <folder />
            </el-icon>
            {{row.name}}
          </a>
          <span v-else-if="row.filetype == 2 || row.ftype == 2">
            <el-image
                    :preview-src-list="srcList"
                    :initial-index="$index"
                    :src="getStorageImageUrl(row.fid, 2)"/>
            {{row.name}}
          </span>
          <span v-else-if="row.filetype == 7 || row.ftype == 7">
            <el-icon>
              <video-play />
            </el-icon>
            {{row.name}}
          </span>
          <span v-else>
            <el-icon>
              <document />
            </el-icon>
            {{row.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="FID" v-if="queryList.action !== 'subiddir'">
        <template #default="{row}">
          <span v-if="row.fid">{{row.fid}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" v-if="queryList.action !== 'subiddir'">
        <template #default="{row}">
          <span v-if="row.fsize > 0">{{row.fsize}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="ctime" />
      <el-table-column label="操作"  v-if="queryList.action !== 'subiddir'">
        <template #default="{row}">
          <el-button
                  :disabled="!(row.filetype == 2 || row.ftype == 2 || row.filetype == 7 || row.ftype == 7)"
                  type="text" size="small" style="margin-right: 10px"
          >关联</el-button>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              文件操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon>
                    <edit />
                  </el-icon>
                  重命名
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon>
                    <copy-document />
                  </el-icon>
                  复制
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon>
                    <document-copy />
                  </el-icon>
                  移动
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon>
                    <delete />
                  </el-icon>
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </template>
  </table-data>
  <folder-pagination
          :queryList="queryList"
          :total="tableData.total"
          @pagination="getDataList"
  />
</template>

<script>
  import TableData from "@/views/public/TableData";
  import {reactive, ref} from 'vue'
  import {getFolder} from "@/api/media/storage";
  import {useStore} from 'vuex'
  import { Folder,
      Document,
      Edit,
      CopyDocument,
      DocumentCopy,
      Delete,
      ArrowDown,
      VideoPlay
  } from "@element-plus/icons"
  import FolderFilter from "./components/FolderFilter";
  import FolderPagination from "./components/FolderPagination";
  import {getStorageImageUrl} from "@/utils/usage-config";

  export default {
    name: "index",
    components: {TableData,
      Folder,
      FolderFilter,
      Document,
      Edit,
      CopyDocument,
      DocumentCopy,
      Delete,
      FolderPagination,
      ArrowDown,
      VideoPlay},
    setup() {
      const store = useStore()
      const queryList = reactive({
        action: "subiddir",
        admin: store.getters.subinfo.isadmin,
        groupid: 0,
        path: '/',
        searchtype: 2,
        ordertype: 5,
        flag: 3,
        key: undefined
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const breadcrumbList = ref([
        {
          pid: 0,
          path: '/',
          name: '根目录'
        }
      ])
      const srcList = ref([])

      const getDataList = () => {
        isloading.value = true
        getFolder(queryList).then(response => {
          isloading.value = false
          if (response.code == 200) {
            tableData.listData = response.data
            console.log(tableData.listData);
            tableData.total = response.totalnum
            srcList.value = []
            response.data.forEach(file => {
              if ((file.filetype !== undefined || file.ftype !== undefined) && (file.filetype == 2 || file.ftype == 2)) {
                srcList.value.push(getStorageImageUrl(file.fid, 1))
              }
            })
          }
        })
      }
      const handlerLink = (item) => {
        setBreadcrumb(item)
        queryList.path = getBreadcrumbPath()
        queryList.key = undefined
        queryList.fid = undefined
        queryList.searchtype = 2
        if (queryList.path == '/') {
          queryList.action = 'subiddir'
        } else {
          queryList.action = 'getlist'
          queryList.startnum = 1
          queryList.pagenum = 10
          queryList.type = queryList.ordertype
        }
        getDataList()
      }
      const setBreadcrumb = (item) => {
        const index = breadcrumbList.value.findIndex(b => b.pid === item.pid)
        const pathTotal = breadcrumbList.value.length
        if (index === -1) {
          breadcrumbList.value.push({
            pid: item.pid,
            path: item.name,
            name: item.name
          })
        } else {
          breadcrumbList.value.splice(index+1, (pathTotal-index+1))
        }
      }
      const getBreadcrumbPath = () => {
        let pathArr = []
        breadcrumbList.value.forEach(b => {
          pathArr.push(b.path)
        })
        return pathArr.join('/')
      }
      getDataList()

      return {
        queryList,
        isloading,
        tableData,
        getDataList,
        handlerLink,
        breadcrumbList,
        getStorageImageUrl,
        srcList
      }
    }
  }
</script>

<style scoped>

</style>
